<script>
export default {
  name: 'my-tab',
  props: {
    tabList: Array,
    value: Number | String,
    fontSize: {
      type: Number,
      default: 32,
    },
    start: {
      type: Boolean,
      default: false
    },
    margin: {
      type: Number,
      default: 10,
    }
  },
}
</script>

<template>
  <view class="tab-container" :class="{start: start}" :style="{margin: `${margin}rpx 20rpx 0`}">
    <view
      class="tab-item"
      :style="{fontSize: fontSize + 'rpx'}"
      :class="{ active: item.id === value, fix: start }"
      @click="$emit('input', item.id)"
      v-for="(item) in tabList"
      :key="item.id"
    >
      {{ item.title }}
    </view>
  </view>
</template>

<style scoped lang="scss">
.tab-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow-x: scroll;
  margin: 10rpx 20rpx;

  &.start {
    justify-content: flex-start;
  }

  .tab-item {
    /*margin-right: 60rpx;*/
    height: 100rpx;
    /*width: 120rpx;*/
    flex-shrink: 0;
    text-align: center;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    padding-top: 15rpx;
    background-size: 100% 100%;
    background-image: url('https://www.dingxians.cn/upload/images/common/bg-tab.png');

    &.active {
      background-image: url('https://www.dingxians.cn/upload/images/common/bg-tab-active.png');
    }

    &.fix {
      margin-right: 60rpx;
    }

    &:last-child {
      margin-right: 0;
    }
  }
}
</style>
